<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/chat.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="../layui/layui.js"></script>
    <title>网络聊天室</title>
</head>
<body background="../img/bigCat.jpg"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%;">

<h1 align="center"><font color="#00bfff" size="30">大忽悠聊天室</font> </h1>

<div class="layui-container" style="background-color: #B5FFF8;height: 600px;border-radius:5px; ">
    <div class="layui-row">
        <div class="layui-col-md5" style="margin-top: 30px">
            <font id="uname" color="#00bfff"  size="5" style="font-weight: bold;margin-top: 100px">用户:</font>
        </div>
        <div class="layui-col-md6" style="margin-top: 45px">
            <font id="toName" color="#00bfff"  size="3" style="font-weight: bold;margin-top: 100px"></font>
        </div>
        <div class="layui-col-md1"  style="margin-top: 30px">
            <font id="login_if" color="red"  size="5" style="font-weight: bold;margin-top: 100px">离线</font>
        </div>
    </div>
    <hr class="layui-border-red">
        <div class="layui-row">
            <div class="layui-col-md8">
                <div style="border:1px ;height: 350px" id="chat">
<!--                    聊天消息展示区-->

                </div>
                <div id="chatArea" style="display: none">
                    <textarea id="chatContent" name="" required lay-verify="required" placeholder="请输入"
                              class="layui-textarea"
                        style="width: 718px"></textarea>
                    <div class="layui-col-md1 layui-col-md-offset10">
                        <button id="sendMsg" class="layui-btn layui-btn-lg layui-btn-normal">发送</button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div style="height: 200px;margin-top: 10px">
                    <font  color="#00bfff"  size="4" style="font-weight: bold;margin-top: 100px">好友列表</font>
                    <hr class="layui-border-red">
                    <ul id="userList">

                    </ul>
                </div>
                <div>
                    <font  color="#00bfff"  size="4" style="font-weight: bold;margin-top: 100px">系统广播</font>
                    <hr class="layui-border-red">
                    <ul id="broadcastList">

                    </ul>
                </div>
            </div>
        </div>
</div>
</body>


<script>
    var username;
    $.ajax({
        url:"getUserName",
        type:"get",
        success:function (res)
        {
            username=res
        }
        ,async:false//同步请求
    })

    //正在和谁聊天
    let uname;
    $("#userList").click(function (event)
    {
        uname=event.target.innerHTML;
        $("#toName").text("正在和"+uname+"聊天")
        $("#chatArea").css("display","inline")
        $(".content").remove()
    })

    //创建WebSocket对象
    var ws=new WebSocket("ws://localhost:8080/chat/"+username)
    //给ws绑定事件
    ws.onopen=function ()
    {
     //在连接后做什么事情
        //显示在线信息
        console.log("连接成功")
        $("#uname").html("<font id=\"uname\" color=\"#00bfff\"  size=\"5\" style=\"font-weight: bold;margin-top: 100px\">用户: "+username+"</font>")
        $("#login_if").html("<font  color=\"#green\"  size=\"5\" style=\"font-weight: bold;margin-top: 100px\">在线</font>")
    }
    //接收到服务器的消息后触发
    ws.onmessage=function (evt)
    {
        console.log("接收到服务器的消息")
        console.log("服务器发送的消息如下:")
        console.log(evt)
       //获取服务端推送过来的消息
        var dataStr=evt.data;
        //将json字符串转化为json对象
        var res=JSON.parse(dataStr);
        console.log("将data部分转化为json对象，如下:")
        console.log(res)
        //判断是否是系统消息
        if(res.system)
        {
            //移除之前添加的内容,不然会重复显示
            $(".u").remove()
            $(".bu").remove()
            console.log("是系统消息")
            //系统消息
            var names=res.message
            //1.好友列表展示
            var userlist=""
            //2.系统广播展示
            var broadcastlist=""

            for(var name of names)
            {
                //好友在线列表，不显示自己
                if(name===username)
                {
                    continue;
                }
              userlist+="<li class='u'><a><font  color=\"#00bfff\"  size=\"4\" style=\"font-weight: bold;margin-top: 100px\">"
                  +
                  name
                  +
                      "</font></a></li>"
               broadcastlist+="<li class='bu'><a><font  color=\"#00bfff\"  size=\"4\" style=\"font-weight: bold;margin-top: 100px\">你的好友"
                   +
                   name
                   +
                   "已上线</font></a></li>"
            }
            //渲染好友列表和系统广播
           $("#userList").append(userlist)
          $("#broadcastList").append(broadcastlist)

        }
        else
        {
            //不是系统消息
            console.log("不是系统消息")
            //接收到好友发来的消息
            let str=  '<div class="content"> ' +
                '<font color="#ff69b4"  size="2" style="font-weight: bold;margin-top: 100px">' +
                 res.fromName +':'+res.message
                '</font></div>';
            $("#chat").append(str)
        }

        //显示当前在线好友
    }
    ws.onclose=function ()
    {
        //显示离线信息
        $("#uname").html("<font id=\"uname\" color=\"#00bfff\"  size=\"5\" style=\"font-weight: bold;margin-top: 100px\">用户:</font>")
        $("#login_if").html("<font  color=\"#red\"  size=\"5\" style=\"font-weight: bold;margin-top: 100px\">离线</font>")
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        alert("当前用户"+username+"下线")
        ws.close()
    }

    $("#sendMsg").click(function ()
    {
        //获取输入文本域里面的内容
        var data=$("#chatContent").val();
        //清空输入区内容
        $("#chatContent").val("");
        //将发送的消息展示在聊天区
        let str='<div class="content" style="margin-left: 650px" ><font color="#ff69b4"  size="2" style="font-weight: bold;margin-top: 100px">' +
            data+':'+username+'</font></div>';

         $("#chat").append(str)
        //将数据发送给服务端
        var json={"toName":uname,"message":data}
        //发送数据给服务端
        ws.send(JSON.stringify(json))
    })


</script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
<!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
<!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
<!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
<!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
<!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->
<script>
    /*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
    L2Dwidget.init({ "model": { jsonPath:
                "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            "scale": 1 }, "display": { "position": "right", "width": 110, "height": 150,
            "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
</html>